<template>
    <view class="container">
      <view class="pay-status">
        <img class="status-icon" :src="status?'https://vtrip-sfile.oss-cn-shenzhen.aliyuncs.com/h5AndMini/2023-6-12/pay-success.png': 'https://cdn1.visiotrip.com/h5AndMini/2023-07-11/close15820%402x.png'" alt="" srcset="">
        <text class="status-text">支付{{ status ? '成功' : '失败' }}</text>
      </view>
      <view class="pay-info">
        <view v-if="weChatApplet && status">
          <view class="pay-info-item"><text class="label">支付金额</text><text class="value">￥{{weChatApplet.totalAmount}}</text></view>
          <view class="pay-info-item"><text class="label">支付商品</text><text class="value">{{weChatApplet.title}}</text></view>
          <view class="pay-info-item"><text class="label">订单编号</text><text class="value">{{weChatApplet.orderId}}</text></view>
        </view>
      </view>
      <view class="pay-btn" @click="close"
        :data-spmCntSuffix="'.payBtn@1.close@'"
        :data-custom="1"
        :data-spm="{'pos': '完成'}">完成</view>
    </view>
  </template>
  
  <script>

  export default {
    components: {
    
    },
    props: {
        weChatApplet:{
            type:Object
        },
        status: {
          type:Boolean,
          default: true
        }
    },
    data() {
      return {
    
      }
    },
    methods: {
        close(){
            this.$emit('closePay')
        }
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    // height: 940rpx;
    background: #F6F6F9;
    border-radius: 48rpx 48rpx 0rpx 0rpx;
    opacity: 1;
    font-family: PingFang SC-Bold, PingFang SC;
    .pay-status {
      width: 750rpx;
      text-align: center;
      margin-top: 72rpx;
      border-radius: 30rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .status-icon {
        width: 120rpx;
        height: 120rpx;
        margin: 0 auto;
        opacity: 1;
      }
      .status-text {
        width: 128rpx;
        height: 32rpx;
        margin-top: 20rpx;
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
        color: $sl-color-grey;
        line-height: 32rpx;
      }
    }
    .pay-info {
      margin: 60rpx 20rpx 110rpx 20rpx;
      flex-grow: 1;
      background: #FFFFFF;
      padding: 36rpx 30rpx;
      border-radius: 26rpx;
      .pay-info-item:not(:last-child) {
        display: flex;
        margin-bottom: 42rpx;
        
      }
      .pay-info-item{
        display: flex;
        .label {
          width: 112rpx;
          height: 28rpx;
          font-size: 28rpx;
          font-weight: normal;
          color: $sl-color-grey;
          line-height: 28rpx; 
          margin-right: 28rpx;
        }
        .value {
          width: 410rpx;
          height: 28rpx;
          font-size: 28rpx;
          font-weight: normal;
          color: $sl-color-dark-grey;
          line-height: 28rpx;
        }
      }

    }
    .pay-btn {
      width: 420rpx;
      height: 88rpx;
      margin: 0 auto 137rpx auto;
      text-align: center;
      line-height: 88rpx;
      color: #FFFFFF;
      background: $sl-color-light-blue;
      border-radius: 44rpx;
      opacity: 1;
    }

  }
  </style>